<div class="tabPanel" data-dojo-attach-point="ellipseContainer">
  <div class="controls">
    <div class="controlGroup">
      <label>Ellipse Type</label>
      <div class="controlItem">
        <select style="width: 225px" data-dojo-type="dijit/form/Select" data-dojo-attach-point="ellipseType">
          <option value="semi">Semi</option>
          <option value="full">Full</option>
        </select>
      </div>
    </div>

    <div class="controlGroup">
        <label data-dojo-attach-point="coordInputLabel">Center Point</label>
        <div class="controlItem">
            <input class="jimu-input coordInput" data-dojo-attach-point="startPointCoords" placeholder="Enter Coordinates" />
            <div class="controlItem paddedLeft">
              <div class='add-with-icon'>
                <span title="Format Input" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButton"></span>
              </div>
              <div class='add-with-icon'>
                <div title="Draw Ellipse" class="draw" data-dojo-attach-point="addPointBtn"></div>
              </div>
            </div>            
        </div>
        <div class="controlGroup">                
            <input class="interactive-checkbox" type="checkbox" data-dojo-attach-point="interactiveEllipse" />
            <label data-dojo-attach-point="interactiveLabel">Create Ellipse Interactively</label>
        </div>
    </div>

    <fieldset>
      <legend>Axis</legend>
        <div class="controlGroup" data-dojo-attach-point="majorAxisInputDiv">
          <label data-dojo-attach-point="majorAxisLabel">Major (Radius)</label>
          <div class="controlItem">
            <input data-dojo-type="dijit/form/NumberTextBox"
              required='true',
              value='100'," 
              data-dojo-props='constraints:{min:1},
                invalidMessage:"The value entered must be numeric.",
                rangeMessage:"Value must be greater than 0."'
           data-dojo-attach-point="majorAxisInput" />
          </div>
        </div>

        <div class="controlGroup" data-dojo-attach-point="minorAxisInputDiv">
          <label data-dojo-attach-point="minorAxisLabel">Minor (Radius)</label>
          <div class="controlItem">
            <input data-dojo-type="dijit/form/NumberTextBox"
            required='true',
              value='50',
              data-dojo-props='constraints:{min:1},
                invalidMessage:"The value entered must be numeric.",
                rangeMessage:"Value must be greater than 0."' data-dojo-attach-point="minorAxisInput" />
          </div>
        </div>

        <div class="controlGroup">
          <label>Unit</label>
          <div class="controlItem">
            <select style="width: 225px" data-dojo-type="dijit/form/Select" id="lengthUnitDD" data-dojo-attach-point="lengthUnitDD">
              <option value="feet">Feet</option>
              <option value="kilometers" selected="selected">Kilometers</option>
              <option value="miles">Miles</option>
              <option value="meters">Meters</option>
              <option value="nautical-miles">Nautical Miles</option>
              <option value="yards">Yards</option>
            </select>
          </div>
        </div>
    </fieldset>

    <div class="controlGroup">
      <label>Orientation Angle</label>
      <div class="controlItem" data-dojo-attach-point="angleInputDiv">
        <input data-dojo-type="dijit/form/NumberTextBox"
              required='true',
              value='0',
              data-dojo-props='constraints:{min:0, max:360},
              invalidMessage:"The value entered must be numeric.",
                rangeMessage:"Value must be between 0 and 360"' data-dojo-attach-point="angleInput" />
         <select style="width: 100px" class="controlSpace" data-dojo-type="dijit/form/Select" id="angleUnitDD" data-dojo-attach-point="angleUnitDD">
          <option value="degrees">Degrees</option>
          <option value="mils">Mils</option>
        </select>
      </div>
    </div>
    <div class="controlGroup" >
      <label class="warning">Warning: Graphics generated using the ellipse tool are not geodetic</label>
    </div>
  
  
    <div class="buttonContainer">
      <div class='jimu-btn jimu-state-disabled' data-dojo-attach-point='okButton' data-dojo-attach-event="onclick: okButtonClicked">OK</div>
      <div class='jimu-btn' data-dojo-attach-point='clearGraphicsButton'>Clear Graphics</div>
    </div>
  </div>
</div>

